<template>
	<view 
	class="no-box l-f l-row-c l-column animate__animated animate__fadeIn animate__faster"
	:class="center ? 'center' : ''"
	:style="{
		height: height
	}">
		<image 
		:style="{
			width: size + 'rpx',
			height: size + 'rpx'
		}"
		class="no-box_image"
		 :src="imagePath" 
		 mode="widthFix"></image>
		<text class="no-box_text">{{title}}</text>
		<slot />
	</view>
</template>

<script>
	export default {
		props: {
			imagePath: {
				type: String,
				default: '/static/images/no-data.png'
			},
			title: {
				type: String,
				default: '暂无数据~'
			},
			size: {
				type: Number,
				default: 350
			},
			center: {
				type: Boolean,
				default: false
			},
			height: {
				type: String,
				default: 'initial'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.no-box {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		&_image {
			width: 350rpx;
			height: 350rpx;
		}
		&_text {
			font-size: 26rpx;
			color: #F34B48;
			font-weight: 700;
			margin-top: 30rpx;
		}
	}
	.center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
</style>